<template>
  <el-row :gutter="20">
    <el-col :span="11">
      <div class="grid-content bg-purple">
        <el-card :body-style="{ padding: '100px' }">
          <el-upload
            align="middle"
            drag
            action=""
            multiple
            :limit="1"
            :auto-upload="false"
            :on-change="getFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>

            <div class="el-upload__tip" slot="tip">
              只能上传jpg，且不超过500kb
            </div>
          </el-upload>
        </el-card>

        <el-card :body-style="{ padding: '20px' }">
          <div style="padding: 14px">
            <span class="demonstration">选项</span>
          </div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="识别语言">
              <el-select v-model="lang" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传图片">
              <el-button
                style="margin-left: 10px"
                size="small"
                type="primary"
                @click="submitUpload"
                >上传</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>

        <el-card :body-style="{ padding: '20px' }">
          <div class="demo-image__placeholder">
            <div class="block">
              <div style="padding: 14px">
                <span class="demonstration">您上传的图片</span>
              </div>
              <el-image :src="src" fit="contain">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>

    <el-col :span="12">
      <div class="grid-content bg-purple" v-loading="loading">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>扫描结果</span>
          </div>
          <div class="clearfix">
            <el-input type="textarea" :autosize="true" v-model="result">
            </el-input>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      image: "",
      lang: "简体中文",
      loading: false,
      options: [
        {
          value: "简体中文",
        },
        {
          value: "繁体中文",
        },
        {
          value: "英语",
        },
        {
          value: "日语",
        },
        {
          value: "韩语",
        },
        {
          value: "拉丁语",
        },
        {
          value: "俄语",
        },
        {
          value: "德语",
        },
        {
          value: "法语",
        },
      ],
      result: "什么都没有....",
    };
  },
  methods: {
    submitUpload() {
      // TODO Axios发送请求
      if (!this.image) return;
      this.loading = true;
      this.$axios({
        url: "http://127.0.0.1:5000/api/images/ocr",
        method: "post",
        data: JSON.stringify({
          image: this.image,
          lang: this.lang
        }),
        headers: {
          "Content-Type": "application/json",
        }
      }).then((response) => {
        // console.log(response.data);
        this.identifier = response.data.identifier
        // console.log(this.identifier)
        // 循环请求
        let timer = setInterval(() => {
          this.$axios({
            url: `http://127.0.0.1:5000/api/images/${this.identifier}`,
            method: 'get'
          }).then((result) => {
            // console.log(result);
            // console.log(result.data.status);
            if (result.data.status === 0) {
              clearInterval(timer)
              let list = JSON.parse(result.data.image)
              this.result = list.join(',')
              this.loading = false
            }
          })
        }, 5000)
      });
    },

    getFile(file, fileList) {
      if (file.raw.type === "image/jpeg" || file.raw.type === "image/png") {
        this.src = window.URL.createObjectURL(file.raw);
        this.getBase64(file.raw).then((res) => {
          this.image = res;
        });
      }
    },

    // 处理图片文件
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 10px;
}
.el-form {
  margin-top: 10px;
}

.grid-content {
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
